<script lang="ts" setup>
import { ref, onBeforeMount, onMounted, onUnmounted } from "vue";
import { Search } from "@element-plus/icons-vue";

import headerIndex from "./components/headerIndex.vue";
import footerIndex from "./components/footerIndex.vue";

const searchVal = ref("");
const selectVal = ref("");

onBeforeMount(() => {});
onMounted(() => {});
onUnmounted(() => {});
</script>

<template>
    <div>
        <headerIndex></headerIndex>
        <el-container>
            <el-main class="div_content">
                <div class="flex-center">
                    <el-input
                        v-model="searchVal"
                        clearable
                        maxlength="30"
                        show-word-limit
                        style="max-width: 800px; height: 40px; border: 2px solid #eee"
                        placeholder="请输入要查询的内容"
                        class="input-with-select"
                    >
                        <template #prepend>
                            <el-select v-model="selectVal" placeholder="查询类型" style="width: 115px">
                                <el-option label="企业名称" value="1" />
                                <el-option label="职位名称" value="2" />
                            </el-select>
                        </template>
                        <template #append>
                            <el-button :icon="Search" />
                        </template>
                    </el-input>
                </div>
                <div class="mgT10">
                    <el-card shadow="hover" v-for="o in 4" :key="o" class="text item mgT10">
                        <div>职位名称：全栈工程师</div>
                        <template #footer>企业名称：广州测试有限公司</template>
                    </el-card>
                </div>
            </el-main>
        </el-container>
        <footerIndex></footerIndex>
    </div>
</template>

<style scoped>
.input-with-select .el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
}
</style>
